import React from 'react';
import { Box, Typography, Paper } from '@mui/material';

// export default function VideoStream() {
//   return (
//     <Paper
//       elevation={3}
//       sx={{
//         p: 2,
//         borderRadius: 4,
//         boxShadow: '0 0 15px rgba(255,105,180,0.1)',
//         bgcolor: '#fdf6f9',
//         height: '100%',
//         display: 'flex',
//         flexDirection: 'column',
//         justifyContent: 'flex-start',
//       }}
//     >
//       <Typography
//         variant="h6"
//         gutterBottom
//         sx={{ color: '#ff69b4', fontWeight: 'bold' }}
//       >
//         📹 视频流
//       </Typography>

//       <Box
//         sx={{
//           width: '100%',
//           border: '2px dashed #ffd6e8',
//           borderRadius: 3,
//           overflow: 'hidden',
//           mt: 1,
//           height: 420,
//           backgroundColor: '#fff0f5',
//           display: 'flex',
//           justifyContent: 'center',
//           alignItems: 'center',
//         }}
//       >
//         <img
//           src="http://localhost:8080/video_feed"
//           alt="视频流"
//           style={{
//             width: '100%',
//             height: '100%',
//             objectFit: 'cover',
//             borderRadius: '8px',
//           }}
//           onError={(e) => {
//             e.target.onerror = null;
//             e.target.src = '';
//             e.target.alt = '视频加载失败';
//           }}
//         />
//       </Box>
//     </Paper>
//   );
// }
export default function VideoStream() {
  return (
    <Paper
      elevation={3}
      sx={{
        p: 2,
        borderRadius: 4,
        bgcolor: '#fdf6f9',
        height: '100%', // 继承父容器高度（300px）
        display: 'flex',
        flexDirection: 'column'
      }}
    >
      <Typography variant="h6" sx={{ color: '#ff69b4', fontWeight: 'bold' }}>
        📹 视频流
      </Typography>
      <Box
        sx={{
          width: '100%',
          height: 'calc(100% - 40px)', // 减去标题高度
          border: '2px dashed #ffd6e8',
          borderRadius: 3,
          overflow: 'hidden',
          mt: 1,
          backgroundColor: '#fff0f5',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <img
          src="http://localhost:5000/video_feed"
          alt="视频流"
          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
          onError={(e) => { e.target.alt = '视频加载失败'; }}
        />
      </Box>
    </Paper>
  );
}
